// 该文件封装了图片懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app) {
        app.directive('img-lazy', {
            // el是指令绑定的元素：img
            // binding里binding.value是指令等于号右边绑定的表达式的值：url
            mounted(el, binding) {
                // console.log(el,binding.value)
                // 懒加载逻辑：当图片进入视口区域时，发送获取图片请求
                const { stop } = useIntersectionObserver(
                    el,([{isIntersecting}]) => {
                        // isIntersecting是布尔值，表示图片是否进入视口区域
                        if (isIntersecting) {
                            // 获取图片
                            el.src = binding.value
                            // 防止useIntersectionObserver函数一直监听图片，从而导致内存浪费
                            stop()
                        }
                    },
                )
            }
        })
    }
}